<!DOCTYPE html>
<html lang="en">

<head>
    @@include('../../include/head.html',{
    "title":"select数据联动"
    })
</head>

<body>
    <div>
        <p>已选择：<span id="result"></span></p>
        <select id="provice"></select>
        <select id="city"></select>
        <select id="area"></select>
    </div>
    <script id="Temp" type="text/html">
        <!-- <option disabled selected value="0:0"> --- {{label}} --- </option> -->
        {{each area v}}
        <option value="{{v.code}}:{{v.name}}" data-name="{{v.name}}">{{v.name}}</option>
        {{/each}}
    </script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="@@webRoot/static/plugin/template-web.js"></script>
    <script>
        /**
            多级联动的逻辑：
            1级联动：存在一个获取一级数据的方法，默认执行。select选择后会触发一级的change（值改变且失去焦点）事件，通过此事件获取值，并展示；
            2级联动：一级选择之后，会触发change事件，在此事件中执行获取二级数据的方法；二级选择之后，触发二级的change事件，此事件可以获取值，并展示；
            3级联动：一级选择之后，会触发change事件，在此事件中执行获取二级数据的方法；二级选择之后，触发二级的change事件，在事件中执行获取三级事件的方法，三级选择之后，会触发change事件，在此事件可以获取已选择的值，并展示；
            一般情况下，一级改变之后，只能改变二级的展示，并不会改变三级的展示，这是因为一级数据改变并不会触发二级change事件

        */
        function provice() {
            $.ajax({
                url: 'http://dingba.ketao.com/api/area/list',
                dataType: 'json',
                data: {
                    level: 1
                }
            }).done(function (cb) {
                let data = cb.data;
                data.label = '省';
                $('#provice').html(template('Temp', data)).trigger('change');
            })
        }

        function city(code) {
            if (code != 0) {
                $.ajax({
                    url: 'http://dingba.ketao.com/api/area/list',
                    dataType: 'json',
                    data: {
                        level: 2,
                        parentcode: code
                    }
                }).done(function (cb) {
                    let data = cb.data;
                    data.label = '市';
                    $('#city').html(template('Temp', data)).trigger('change');
                })
            } else {
                let data = {};
                data.label = '市';
                $('#city').html(template('Temp', data)).trigger('change');
            }

        }

        function area(code) {
            if (code != 0) {
                $.ajax({
                    url: 'http://dingba.ketao.com/api/area/list',
                    dataType: 'json',
                    data: {
                        level: 3,
                        parentcode: code
                    }
                }).done(function (cb) {
                    let data = cb.data;
                    data.label = '区';
                    $('#area').html(template('Temp', data))
                })
            } else {
                let data = {};
                data.label = '区';
                $('#area').html(template('Temp', data))
            }
        }
        provice();
        $('#provice').on('change', function (e) {
            let code = e.target.value.split(':')[0];
            let name = e.target.value.split(':')[1];
            // $('#result').text(name);
            city(code);
        })
        $('#city').on('change', function (e) {
            let code = e.target.value.split(':')[0] ? e.target.value.split(':')[0] : '0';
            let name = e.target.value.split(':')[1];
            // let result = $('select option:selected').toArray().map((ele, inx) => {
            //     return $(ele).text();
            // });
            // $('#result').text(result.join(' '));
            area(code);
        })
        $('#area').on('change', function (e) {
            let code = e.target.value.split(':')[0];
            let name = e.target.value.split(':')[1];
            let result = $('select option:selected').toArray().map((ele, inx) => {
                return $(ele).text();
            });
            $('#result').text(result.join(' '));
        })
    </script>
</body>

</html>